<!-- 数据统计汇总 -->
<template>
  <div class="outer">
    <h5>数据统计汇总</h5>
    <div class="main">
      <div class="coffee-echarts">
        <div id="echart"></div>
      </div>
      <div class="coffee-echarts">
        <div id="echart2"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderStatistics, getCoffeeEcharts } from "@/api/api";
import * as echarts from "echarts";

export default {
  components: {},
  props: {},
  data() {
    return {
      echartsData: {},
      echartsData2: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 获取咖啡柱状图
    getCoffeeEcharts() {
      getOrderStatistics()
        .then((result) => {
          if (result.data.code == 1 && result.data.data) {
            this.echartsData = result.data.data;
            this.initEcharts();
          }
        })
        .catch((err) => {
          this.$message({
            message: "获取图表数据失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
      getCoffeeEcharts()
        .then((result) => {
          if (result.data.code == 1 && result.data.data) {
            this.echartsData2 = result.data.data;
            this.initEcharts2();
          }
        })
        .catch((err) => {});
    },

    // 绘制柱状图
    initEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("echart"));
      let xData = [];
      let yData = [];
      for (let key in this.echartsData) {
        xData.push(this.echartsData[key].name);
        yData.push(this.echartsData[key].sum);
      }
      myChart.setOption({
        title: {
          text: "咖啡订单销量",
        },
        tooltip: {},
        xAxis: {
          data: xData,
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: yData,
          },
        ],
      });
    },

    initEcharts2() {
      var myChart = echarts.init(document.getElementById("echart2"));
      let month = [];
      let series = [];
      let legend = [];
      for (let key in this.echartsData2) {
        let hasMonth = month.find((item) => {
          return item == this.echartsData2[key].month;
        });
        if (hasMonth == undefined) {
          month.push(this.echartsData2[key].month);
        }
        legend.push(this.echartsData2[key].name);
      }
      for (let key in this.echartsData2) {
        let index = month.indexOf(this.echartsData2[key].month);
        let data = [];
        for (let i = 0; i <= month.length; i++) {
          if (i != index) {
            data[i] = 0;
          } else if (i == index) {
            data[i] = this.echartsData2[key].sum;
          }
        }
        series.push({
          name: this.echartsData2[key].name,
          type: "line",
          data: data,
        });
      }

      console.log("source", month);
      console.log("series", series);
      myChart.setOption({
        title: {
          text: "月度咖啡订单销量",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: legend,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: month,
        },
        yAxis: {
          type: "value",
        },
        series: series,
      });
    },
  },
  created() {},
  mounted() {
    this.getCoffeeEcharts();
  },
};
</script>
<style lang="scss" scoped>
.outer {
  padding: 20px;

  h5 {
    margin: 20px;
  }

  .main {
    display: flex;
    justify-content: space-evenly;
  }
  .coffee-echarts {
    width: 100%;
    padding: 20px 0 0 0;

    #echart {
      width: 100%;
      height: 400px;
    }

    #echart2 {
      width: 100%;
      height: 400px;
    }
  }
}
</style>